<template>
  <div class="comments-wrap">
    <el-table :data="tableData" style="width: 100%" v-loading="isLoading">
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column prop="comment_status" label="评论状态">
        <template slot-scope="scope">{{scope.row.comment_status ?'正常':'关闭'}}</template>
      </el-table-column>
      <el-table-column prop="total_comment_count" label="总评论数"></el-table-column>
      <el-table-column prop="fans_comment_count" label="评论粉丝数"></el-table-column>
      <el-table-column prop="comment_status" label="允许评论">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.comment_status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="doChange(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template slot-scope="scope">
          <el-button size="mini">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
        :disabled="pageDisabled"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { comments, commentStatus } from "@/api/comment.js";
export default {
  data() {
    return {
      tableData: [],
      total: 0,
      pageDisabled:false,
      isLoading:false
    };
  },
  //获取所有评论
  async created() {
    this.isLoading = true;
    let res = await comments();
    // console.log(res);
    this.isLoading = false;
    this.tableData = res.data.data.results;
    this.total = res.data.data.total_count;
  },
  methods: {
    //修改评论状态
    async doChange(row) {
      console.log(row);
      let res = await commentStatus(
        row.comment_status,
        row.id.toString().trim()
      );
    },
    //切换页码
    async handleCurrentChange(p) {
      this.pageDisabled = true;
      let res = await comments(p);
      //   console.log(res)
      this.pageDisabled = false;
      this.tableData = res.data.data.results;
    }
  }
};
</script>

<style lang="less" scoped>
.page {
  text-align: center;

  margin: 20px 0px;

  .home-wrap .home-in .home-right[data-v-bc2d8efa] {
    line-height: 0px !important;
  }
}
</style>